<template>
    <div id="TableContent">
        <el-button type="text" @click="dialogTableVisible = true">查看</el-button>
        <el-dialog title="详情" :visible.sync="dialogTableVisible">
            <el-table :data="tableData">
                <el-table-column v-for="(item,index) in headerList"
                                 :key="index"
                                 :label="item"
                                 :prop="item"
                ></el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>
<script>
export default {
    name: 'TableContent',
    data:function(){
        return{
            dialogTableVisible: false,
            headerList: []
        }
    },
    props: {
        tableData:{
            type:Array,
            default:()=>[]
        }
    },
    mounted() {
        this.headerList = this.getHeaderList()
    },
    methods: {
        getHeaderList () {
            let  headerList = []

            if (this.tableData.length > 0 ) {
                headerList = Object.keys(this.tableData[0])
            }
            return headerList
        }
    }
}

</script>


